
// layui
layui.use(['jquery', 'layer', 'form','upload'],function () {
    let $=layui.jquery;
    let layer=layui.layer;
    let form=layui.form;
    let upload=layui.upload
    //
        $('#logo_url').val('../img/voucher_logo2.jpg')
        $('#background_pic').val('../img/voucher-bg2.jpg')
    // logo
    upload.render({
        elem: '#upload-logo'
        , url: '/upload/'
        , done: function (res) {
            console.log(res)


        }
    });
    // background
    upload.render({
        elem: '#upload-bg'
        , url: '/upload/'
        , done: function (res) {
            console.log(res)

            
        }
    });

    $('.textarea').bind('input propertychange', function () {
        var len = 1024 - $(this).find('textarea').val().length
        if (len < 0) {
            len = 0
        }
        $(this).find('span').text(len)
    })
    $('.textarea').eq(0).find('span').text(1024 - $('.textarea').eq(0).find('textarea').val().length)
    $('.textarea').eq(1).find('span').text(1024 - $('.textarea').eq(1).find('textarea').val().length)


})
// layui
// card
var card = [{
    background_pic_url: "../img/voucher-bg.jpg",
    logo_url: "../img/voucher_logo.jpg",
    brand_name:"鹿程智慧油站",
    title:"智慧油站会员卡",
    center_title: "一键加油",
    center_sub_title: '快速加油，优惠多多',
    center_url:'我是一键加油的链接',
    custom:[ 
        {name: "菜单名称1", text: '提示消息', url: '跳转链接'},
        {name: "菜单名称2", text: '提示消息', url: '跳转链接'},
        {name: "菜单名称3", text: '提示消息', url: '跳转链接'}
    ]
}]
// vue
new Vue({
    el:'#voucher',
    data:{
        voucherList:card,
        cardName: card[0].brand_name,           //绑定卡券数据
        cardText: card[0].title,                //绑定卡券名称
        cardTitle: card[0].center_title,        //绑定卡券名称下方文字
        cardTxt: card[0].center_sub_title,      //绑定卡券下方的按钮
        cardLink:card[0].center_url,            //绑定卡券名称的链接
        cardListIndex:null,                      //给自定义列表加当前样式
        cardTitleH:"",                          //单个input的h3
        cardTextH:"",                           //单个input的h4
        cardUpTit: "",                          //上传图片的h3
        cardUpTxt:"",                           //上传图片的h4
        cardListName: '',                       //自定义列表的名称
        cardListText: '',                       //自定义列表的提示文字
        cardListUrl: '',                        //自定义列表的url   
        isShow: false,                          //点击右侧选择您要修改的内容区域  隐藏
        isCards:false,                          //右侧单个input的显示隐藏
        isCardName:false,                       //CardName的显示隐藏
        isCardText:false,                       //CardText的显示隐藏
        isCardTitle:false,                      //CardTitle的显示隐藏
        isCardTxt:false,                        //CardTxt 的显示隐藏
        isUpload:false,                         //右侧上传图片的显示隐藏
        isLogoShow:false,                       //logo上传图片的显示隐藏
        isCardList:false,                       //右侧自定义列表的显示隐藏
        isCardAdd:false,                        //左侧添加一行的自定义类列表的显示隐藏
        cardListIndexNew:null,                  //当前压盖的显示隐藏
    },
    methods:{
        //点击卡片名称
        clickCardName(){
            this.cardTitleH ='请输入您的商户名称';
            this.cardTextH ='此名称将显示在自制卡券上，建议填写跟该公众号认证主题一致的品牌名、公司名等。';
            this.isInputHide()
            this.isCardName=true;
        },
        //点击卡券下方文字介绍
        clickCardText(){
            this.cardTitleH = '请输入您的卡券介绍';
            this.cardTextH = '这是写卡片介绍的介绍说明';
            this.isInputHide();
            this.isCardText=true;
        },
        //点击一键加油
        clickCardTitle(){
            this.cardTitleH = '请输入您的按钮名称';
            this.cardTextH = '这是这个按钮是给人点击的';
            this.isInputHide();
            this.isCardTitle=true;
        },
        //点击一键加油下方文字
        clickCardTxt(){
            this.cardTitleH = '请为您的按钮写一些简介';
            this.cardTextH ="好的简介会促使别人点击";
            this.isInputHide();
            this.isCardTxt=true;
        },
        //点击上传logo
        clickLogo(){
            this.inputHide()
            this.cardUpTit ='请上传logo'
            this.cardUpTxt ='请谨慎提交与认证主主题一致的商户logo，尺寸为正方形图片，300px *300px。支持.jpg .jpeg .bmp .png格式，大小不超过5M。'
            this.isUpload = true;
            this.isLogoShow=true;
        },
        //点击上传bg
        clickBg(){
            this.inputHide()
            this.cardUpTit = '请上传背景图片';
            this.cardUpTxt = '背景图规范请查看<a href="https://mp.weixin.qq.com/cgi-bin/readtemplate?t=cardticket/card_cover_tmpl&type=info&lang=zh_CN" target="_block" style="color:#00cc9a;margin-left:10px;">微信会员卡自定义背景设计规范</a>';
            this.isUpload = true;
            this.isLogoShow = false;
        },
        //点击列表
        clickCardList(item,index){
            this.inputHide();
            this.isCardList=true;
            this.cardListIndex= this.voucherList[0].custom.indexOf(item);
            this.cardListName=this.voucherList[0].custom[this.cardListIndex].name;
            this.cardListText=this.voucherList[0].custom[this.cardListIndex].text;
            this.cardListUrl=this.voucherList[0].custom[this.cardListIndex].url;
            this.cardListIndexNew=index;
        },
        //添加自定义列表
        clickCardListAdd(){
            let obj={name: "菜单名称", text: '提示消息', url: '跳转链接'};
            let len=this.voucherList[0].custom.length;
           if (len>2) {
               layer.msg('菜单不可以超过3个哦', { icon: 5 })
           }else{
               this.voucherList[0].custom.push(obj)
               layer.msg('添加成功', { icon: 1 })
           }
            
            this.isCardAdd=false;
        },
        //上移一位
        clickCardListOrder(index){
            if(index==0){
                layer.msg('现在已经是第一位了哦',{icon:5})
            }else{
                this.cardListIndexNew=index-1;
                this.cardListIndex=index-1;
                [this.voucherList[0].custom[index],this.voucherList[0].custom[index-1]]=[this.voucherList[0].custom[index-1],this.voucherList[0].custom[index]]
                layer.msg('上移成功',{icon:1})
            }
        },
        //删除
        clickCardListDelete(index,name){
            layer.confirm('您确定要<span style="color:red">'+name+'</span>删除吗',{title:"请确认"},(num)=> {
                this.voucherList[0].custom.splice(index,1)
                layer.close(num);
                layer.msg('删除成功',{icon:1,time:1200});
                this.isCardList=false;
                this.isShow = true;
                this.cardListIndexNew=null;
                //显示添加按钮
                if (this.voucherList[0].custom.length == 0) {
                    this.isCardAdd = true;
                } 
            }) 
        },
        //更新卡片名称
        changeCardName(item){
            let num=0;
            for(let i=0;i<item.length;i++){
                if (item.charCodeAt(i)>255){
                    num+=2;
                }else{
                    num+=1;
                }
            }
            if (num>20) {
                layer.tips('不得超过10个汉字或20个字母','#cardName',{time:5000,tips:3});
            }else{
                this.voucherList[0].brand_name=item;
            }
        },
        //更新卡券名称下方文字
        changeCardText(item){
            // 
            this.voucherList[0].title=item;
        },
        //更新一键加油
        changeCardTitle(item){
            // 
            this.voucherList[0].center_title=item;
        },
        //更新一键加油的链接
        changeCardLink(item){
             // 
            this.voucherList[0].center_url=item;
        },
        // 更新一键加油下方文字
        changeCardTxt(item){
            // 
            this.voucherList[0].center_sub_title=item;
        },
        //更新自定义列表的名称
        changeCardListName(index,item){
            ////////
           this.voucherList[0].custom[index].name=item;
        },
        //更新自定义列表的提示消息
        changeCardListText(index,item){
            /////////
            this.voucherList[0].custom[index].text=item;
        },
        //更新自定义列表的链接
        changeCardListUrl(index,item){
            ////////
            this.voucherList[0].custom[index].url=item;
        },
        //所有输入框显示隐藏
        inputHide(){
            this.isShow=false;
            this.isCards=false;
            this.isCardName=false;
            this.isCardText=false;
            this.isCardTitle=false;
            this.isCardTxt=false;
            this.isUpload=false;
            this.isCardList=false;
            this.cardListIndexNew=null;
            if(this.voucherList[0].custom.length==0){
                this.isCardAdd=true;
            }else{
                this.isCardAdd=false;
            }
        },
        //显示隐藏框
        isInputHide(){
            this.inputHide()
            this.isCards = true;
        },
        //提交数据
        cardSubmit(){
            this.voucherList[0].background_pic_url=$('#background_pic').val()
            this.voucherList[0].logo_url=$('#logo_url').val()
            console.log(this.voucherList[0])
        }
    },
    mounted:function () {
        this.$nextTick(function () {
            if (!this.voucherList[0].custom) {
                this.$set(voucherList[0], 'custom', [])
            }
            // this.clickCardName()


            
            //初始化
            console.log('初始化成功')
            

        })
    }
})